<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>学习vue</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script><!--导入官网的vue,就不用去用本地的了-->
	<script src="https://static.runoob.com/code/js/vueapp.js"></script><!--用于model-->
	<script src="/vue.min.js"></script>
	<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="/js/bootstrap.js"></script>
	<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

	<script src="/js/bootstrap.min.js"></script>
    <style>
		.bounce-enter-active {
		  animation: bounce-in .5s;
		}
		.bounce-leave-active {
		  animation: bounce-in .5s reverse;
		}
		@keyframes bounce-in {
		  0% {
		    transform: scale(0);
		  }
		  50% {
		    transform: scale(1.5);
		  }
		  100% {
		    transform: scale(1);
		  }
		}
	</style>
	</head>
	<body>
		<div id="example-3">
		  <button @click="show = !show">
		    Toggle render
		  </button>
		  <transition
		    name="custom-classes-transition"
		    enter-active-class="animated tada"
		    leave-active-class="animated bounceOutRight"
		  >
		    <p v-if="show">hello</p>
			
		
		  </transition>
		  
	<transition>
	  <button v-if="docState === 'saved'" key="saved">
	    Edit
	  </button>
	  <button v-else-if="docState === 'edited'" key="edited">
	    Save
	  </button>
	  <button v-if="docState === 'editing'" key="editing">
	    Cancel
	  </button>
	  <button v-else>删除</button>
	  <transition name="fade" mode="out-in">
	  <button >
		  ok
	  </transition>
	</transition>
	

        
		</div>
		<div id="example-2">
		  <button @click="show = !show">Toggle show</button>
		  <transition name="bounce">
		    <h1 v-if="show">哈哈哈哈哈哈哈哈哈哈哈</h1>
		  </transition>
		</div>
		<script>
			new Vue({
			  el: '#example-2',
			  data: {
			    show: true
			  }
			})
			new Vue({
			  el: '#example-3',
			  data: {
			    show: true,
			docState: "editig"
			  }
			
			})
		</script>
	
	</body>
</html>
